<template>
  <div class="dashboard-editor-container">
    <div class="cont-left">
      <div class="cllas">
        <el-row :gutter="15">
          <el-col :span="6">
            <div class="list bo-red">
              <div class="p-te">待处理调度</div>
              <div class="p-num color-red">{{ dispatchNum }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="list bo-violet">
              <div class="p-te">待命车辆</div>
              <div class="p-num color-violet">{{ carNum }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="list bo-blue">
              <div class="p-te">待命班组</div>
              <div class="p-num color-blue">{{ classNum }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="list bo-green">
              <div class="p-te">待命司机</div>
              <div class="p-num color-green">{{ driverNum }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div id="map-conten" class="map-conten" ref="map_conten"></div>
    </div>
    <!-- 右边统计图表 -->
    <div class="tui-chart">
      <div class="carg">
        <div class="tit">
          <img src="@/assets/image/icon-chart.png" />
          <div class="p-text">出车次数对比</div>
        </div>
        <div class="chart-con" ref="chart_a"></div>
      </div>
      <div class="carg">
        <div class="tit">
          <img src="@/assets/image/icon-chart-1.svg" />
          <div class="p-text">出车时长对比</div>
        </div>
        <div class="chart-con" ref="chart_b"></div>
      </div>
      <div class="carg">
        <div class="tit">
          <img src="@/assets/image/icon-chart-2.svg" />
          <div class="p-text">救治总时长对比</div>
        </div>
        <div class="chart-con" ref="chart_c"></div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import { getStatistical } from "@/api/biz/car";
import { getResourceNumber } from "@/api/biz/car";
import { getlistGps } from "@/api/biz/car";
var echarts = require("echarts");
require("echarts/extension/bmap/bmap");
var styleJson = "";
export default {
  name: "Index",
  components: {},
  data() {
    return {
      carNum: "", //待命车辆
      classNum: "", //待命班组
      dispatchNum: "", //待处理调度
      driverNum: "" //待命司机
      // lineChartData: lineChartData.newVisitis
    };
  },
  created() {
    getResourceNumber().then(response => {
      if (response.code === 200) {
        this.carNum = response.data.carNum;
        this.classNum = response.data.classNum;
        this.dispatchNum = response.data.dispatchNum;
        this.driverNum = response.data.driverNum;
      }
    });
  },

  mounted() {
    getStatistical().then(response => {
      if (response.code === 200) {
        this.drawLine(response.data);
        this.drawbar(response.data);
        this.drawbar_2(response.data);
      }
    });
    getlistGps().then(response => {
      if (response.code === 200) {
        this.drawMap(response.data);
      }
    });
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    drawLine(data) {
      let date_val = [];
      // for (let i = 0; i < data.lastMonth.carNumber.data.length; i++) {
      for (let i = 0; i < 31; i++) {
        date_val.push(i + 1);
      }
      console.log(date_val);
      var chart_a = this.$refs.chart_a;
      if (chart_a) {
        echarts.init(chart_a).setOption({
          title: {
            text: "出车次数",
            left: 0,
            top: 0,
            textStyle: {
              color: "#485465",
              fontSize: 12,
              fontWeight: 50000
            }
          },
          color: ["#2BA2F5", "#FFAB48"],
          grid: {
            // left: "30px",
            right: "0px",
            top: "40px",
            bottom: "20px"
          },
          legend: {
            right: 0,
            top: 0,
            itemWidth: 8,
            itemHeight: 8,
            data: [
              {
                name: "上月",
                icon: "circle"
              },
              {
                name: "本月",
                icon: "circle"
              }
            ]
          },
          tooltip: {
            trigger: "axis",
            formatter: function(val) {
              if (val.length > 1) {
                let color0 = val[0].color;
                let color1 = val[1].color;
                return `<span style="color:${color0};"> ● </span>${
                  val[0].seriesName
                }: ${val[0].data}次<br/>
                      <span style="color:${color1};"> ● </span>${
                  val[1].seriesName
                }: ${val[1].data}次`;
              } else {
                let color0 = val[0].color;
                return `<span style="color:${color0};"> ● </span>${
                  val[0].seriesName
                }: ${val[0].data}次`;
              }
            }
          },
          textStyle: {
            color: "#485465",
            fontSize: 12
          },
          xAxis: {
            data: date_val,
            axisTick: {
              show: false //不显示坐标轴刻度线
            },
            axisLine: {
              show: false //不显示坐标轴线
            }
          },
          yAxis: {
            axisTick: {
              show: false //不显示坐标轴刻度线
            },
            axisLine: {
              show: false //不显示坐标轴线
            }
          },
          series: [
            {
              name: "上月",
              type: "line",
              data: data.lastMonth.carNumber.data
            },
            {
              name: "本月",
              type: "line",
              data: data.thisMonth.carNumber.data
            }
          ]
        });
      }
    },
    drawbar(data) {
      // console.log(data)
      let date_val = [];
      // for (let i = 0; i < data.lastMonth.carDuration.data.length; i++) {
      for (let i = 0; i < 31; i++) {
        date_val.push(i + 1);
      }

      var chart_b = this.$refs.chart_b;
      if (chart_b) {
        echarts.init(chart_b).setOption({
          title: {
            text: "时长/分钟",
            left: 0,
            top: 0,
            textStyle: {
              color: "#485465",
              fontSize: 12,
              fontWeight: 50000
            }
          },
          color: ["#2BA2F5", "#FFAB48"],
          grid: {
            // left: "30px",
            right: "0px",
            top: "40px",
            bottom: "20px"
          },
          legend: {
            right: 0,
            top: 0,
            itemWidth: 8,
            itemHeight: 8,
            data: [
              {
                name: "上月",
                icon: "circle"
              },
              {
                name: "本月",
                icon: "circle"
              }
            ]
          },
          tooltip: {
            trigger: "axis",
            formatter: function(val) {
              if (val.length > 1) {
                let color0 = val[0].color;
                let color1 = val[1].color;
                return `<span style="color:${color0};"> ● </span>${
                  val[0].seriesName
                }: ${val[0].data}分钟<br/>
                      <span style="color:${color1};"> ● </span>${
                  val[1].seriesName
                }: ${val[1].data}分钟`;
              } else {
                let color0 = val[0].color;
                return `<span style="color:${color0};"> ● </span>${
                  val[0].seriesName
                }: ${val[0].data}分钟`;
              }
            }
          },
          textStyle: {
            color: "#485465",
            fontSize: 12
          },
          xAxis: {
            data: date_val,
            axisTick: {
              show: false //不显示坐标轴刻度线
            },
            axisLine: {
              show: false //不显示坐标轴线
            }
          },
          yAxis: {
            axisTick: {
              show: false //不显示坐标轴刻度线
            },
            axisLine: {
              show: false //不显示坐标轴线
            }
          },
          series: [
            {
              name: "上月",
              barWidth: "2px",
              barGap: 0, //柱间距离
              type: "bar",
              data: data.lastMonth.carDuration.data
            },
            {
              name: "本月",
              barWidth: "2px",
              barGap: 0, //柱间距离
              type: "bar",
              data: data.thisMonth.carDuration.data
            }
          ]
        });
      }
    },
    drawbar_2(data) {
      // console.log(data)
      let date_val = [];
      // for (let i = 0; i < data.lastMonth.teatDuration.data.length; i++) {
      for (let i = 0; i < 31; i++) {
        date_val.push(i + 1);
      }
      var chart_c = this.$refs.chart_c;
      if (chart_c) {
        echarts.init(chart_c).setOption({
          title: {
            text: "时长/分钟",
            left: 0,
            top: 0,
            textStyle: {
              color: "#485465",
              fontSize: 12,
              fontWeight: 50000
            }
          },
          color: ["#2BA2F5", "#FFAB48"],
          grid: {
            // left: "30px",
            right: "0px",
            top: "40px",
            bottom: "20px"
          },
          legend: {
            right: 0,
            top: 0,
            itemWidth: 8,
            itemHeight: 8,
            data: [
              {
                name: "上月",
                icon: "circle"
              },
              {
                name: "本月",
                icon: "circle"
              }
            ]
          },
          tooltip: {
            trigger: "axis",
            formatter: function(val) {
              if (val.length > 1) {
                let color0 = val[0].color;
                let color1 = val[1].color;
                return `<span style="color:${color0};"> ● </span>${
                  val[0].seriesName
                }: ${val[0].data}分钟<br/>
                      <span style="color:${color1};"> ● </span>${
                  val[1].seriesName
                }: ${val[1].data}分钟`;
              } else {
                let color0 = val[0].color;
                return `<span style="color:${color0};"> ● </span>${
                  val[0].seriesName
                }: ${val[0].data}分钟`;
              }
            }
          },
          textStyle: {
            color: "#485465",
            fontSize: 12
          },
          xAxis: {
            data: date_val,
            axisTick: {
              show: false //不显示坐标轴刻度线
            },
            axisLine: {
              show: false //不显示坐标轴线
            }
          },
          yAxis: {
            axisTick: {
              show: false //不显示坐标轴刻度线
            },
            axisLine: {
              show: false //不显示坐标轴线
            }
          },
          series: [
            {
              name: "上月",
              barWidth: "2px",
              barGap: 0, //柱间距离
              type: "bar",
              type: "bar",
              data: data.lastMonth.teatDuration.data
            },
            {
              name: "本月",
              barWidth: "2px",
              barGap: 0, //柱间距离
              type: "bar",
              type: "bar",
              data: data.thisMonth.teatDuration.data
            }
          ]
        });
      }
    },
    drawMap(data) {
      // console.log(data)
      var chart_map = this.$refs.map_conten;
      if (chart_map) {
        var map = new BMap.Map(this.$refs.map_conten);
        var point = new BMap.Point(114.38689, 30.637378);
        map.centerAndZoom(point, 6);
        map.enableScrollWheelZoom();
        // map.setMapStyleV2({ styleJson: styleJson });
        map.setMapStyleV2({
          styleId: "b048642bbbab60eaf9b32a527d9f6b1b"
        });
        for (let i = 0; i < data.length; i++) {
          let longitude = data[i].longitude;
          let latitude = data[i].latitude;
          let coordinate = new BMap.Point(longitude, latitude);
          var opts = {
            position: coordinate,
            offset: new BMap.Size(-30, -50)
          };
          var label = new BMap.Label(data[i].vin, opts); // 创建文本标注对象
          label.setStyle({
            background: "#66ABFD",
            color: "#ffffff",
            fontSize: "14px",
            //  lineHeight : "20px",
            padding: "5px",
            fontWeight: "bold",
            border: "0"
          });
          map.addOverlay(label);
          var myIcon = new BMap.Icon(
            "ico-ambulance.png",
            new BMap.Size(40, 40)
          );
          var marker = new BMap.Marker(coordinate, { icon: myIcon }); // 创建标注
          map.addOverlay(marker);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
  box-sizing: border-box;
  height: 100%;
  background-color: rgb(240, 242, 245);
  position: relative;
  min-width: 1150px;
  display: flex;
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.cont-left {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cont-left .cllas {
  float: left;
  width: 100%;
  height: 120px;
}
.cont-left .cllas .list {
  width: 100%;
  background: #fff;
  height: 120px;
}
.cont-left .cllas .list .p-te {
  font-size: 18px;
  color: #333;
  margin: 20px 0 0 20px;
}
.cont-left .cllas .list .p-num {
  float: left;
  width: 100%;
  font-size: 32px;
  text-align: center;
  margin-top: 20px;
}
.cont-left .cllas .list .color-red {
  color: #fd6666;
}
.cont-left .cllas .list .color-violet {
  color: #a27eff;
}
.cont-left .cllas .list .color-blue {
  color: #66abfd;
}
.cont-left .cllas .list .color-green {
  color: #1fcf5c;
}
.cont-left .cllas .bo-red {
  border-top: 2px solid #fd6666;
}
.cont-left .cllas .bo-violet {
  border-top: 2px solid #a27eff;
}
.cont-left .cllas .bo-blue {
  border-top: 2px solid #66abfd;
}
.cont-left .cllas .bo-green {
  border-top: 2px solid #1fcf5c;
}
.cont-left .map-conten {
  background: #fff;
  float: left;
  width: 100%;
  /* // padding:20px; */
  margin-top: 15px;
  flex: 1;
}
.tui-chart {
  float: right;
  margin-left: 15px;
  overflow: hidden;
  width: 600px;
  /* // border:1px solid #CCCCCC; */
}
.tui-chart .carg {
  width: 100%;
  background: #fff;
  height: 33%;
  padding: 10px;
  margin-bottom: 10px;
}
.tui-chart .carg .tit {
  float: left;
  // margin-top:10px;
}
.tui-chart .carg .tit img {
  float: left;
  width: 20px;
}
.tui-chart .carg .tit .p-text {
  float: left;
  font-size: 16px;
  color: #333333;
  margin-left: 15px;
}
.tui-chart .carg .chart-con {
  float: left;
  width: 100%;
  height: 83%;
  margin-top: 10px;
  // border: 1px solid #f60;
}
</style>
